<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" href="/favicon.ico" th:href="@{/favicon.ico}" sizes="32x32">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登录</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="images/favicon.ico" th:href="@{/images/favicon.ico}"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="css/typography.css" th:href="@{/css/typography.css}">
    <!-- Style CSS -->
    <link rel="stylesheet" href="css/style.css" th:href="@{/css/style.css}">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="css/responsive.css" th:href="@{/css/responsive.css}">
</head>
<body>
<!-- loader Start -->
<div id="loading">

</div>
<!-- loader END -->
<!-- Sign in Start -->
<section class="sign-in-page">
    <div class="container p-0">
        <div class="row no-gutters">
            <div class="col-sm-12 align-self-center">
                <div class="sign-in-from bg-white">
                    <h1 class="mb-0">登录您的账号</h1>
                    <p>输入您的用户名、邮箱、密码</p>
                    <div class="alert alert-danger" role="alert" th:if="${loginTip ne null}">
                        <div class="iq-alert-text" th:text="${loginTip}"></div>
                    </div>
                    <form class="mt-4" action="/user/login" method="post">
                        <div class="form-group">
                            <label for="exampleInputEmail2">邮箱</label>
                            <input type="email" class="form-control mb-0" id="exampleInputEmail2" name="email"
                                   placeholder="请输入您的邮箱">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">密码</label>
                            <a href="#" class="float-right">忘记密码</a>
                            <input type="password" class="form-control mb-0" id="exampleInputPassword1" name="password"
                                   placeholder="请输入您的密码">
                        </div>
                        <div class="d-inline-block w-100">
                            <div class="custom-control custom-checkbox d-inline-block mt-2 pt-1">
                                <input type="checkbox" class="custom-control-input" id="customCheck1" name="rememberMe">
                                <label class="custom-control-label" for="customCheck1">记住我</label>
                            </div>
                            <button type="submit" class="btn btn-primary float-right">登录</button>
                        </div>
                        <div class="sign-info">
                            <span class="dark-color d-inline-block line-height-2">还没有账号? <a
                                    href="/sign-up">注册一个</a></span>
                            <!-- 登录方式小图标 -->
                            <ul class="iq-social-media" hidden="hidden">
                                <li><a href="#"><i class="ri-facebook-box-line"></i></a></li>
                                <li><a href="#"><i class="ri-twitter-line"></i></a></li>
                                <li><a href="#"><i class="ri-instagram-line"></i></a></li>
                            </ul>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Sign in END -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="js/popper.min.js" th:src="@{/js/popper.min.js}"></script>
<script src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- Appear JavaScript -->
<script src="js/jquery.appear.js" th:src="@{/js/jquery.appear.js}"></script>
<!-- Countdown JavaScript -->
<script src="js/countdown.min.js" th:src="@{/js/countdown.min.js}"></script>
<!-- Counterup JavaScript -->
<script src="js/waypoints.min.js" th:src="@{/js/waypoints.min.js}"></script>
<script src="js/jquery.counterup.min.js" th:src="@{/js/jquery.counterup.min.js}"></script>
<!-- Wow JavaScript -->
<script src="js/wow.min.js" th:src="@{/js/wow.min.js}"></script>
<!-- Apexcharts JavaScript -->
<script src="js/apexcharts.js" th:src="@{/js/apexcharts.js}"></script>
<!-- Select2 JavaScript -->
<script src="js/select2.min.js" th:src="@{/js/select2.min.js}"></script>
<!-- Owl Carousel JavaScript -->
<script src="js/owl.carousel.min.js" th:src="@{/js/owl.carousel.min.js}"></script>
<!-- Magnific Popup JavaScript -->
<script src="js/jquery.magnific-popup.min.js" th:src="@{/js/jquery.magnific-popup.min.js}"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="js/smooth-scrollbar.js" th:src="@{/js/smooth-scrollbar.js}"></script>
<!-- Chart Custom JavaScript -->
<script src="js/chart-custom.js" th:src="@{/js/chart-custom.js}"></script>
<!-- Custom JavaScript -->
<script src="js/custom.js" th:src="@{/js/custom.js}"></script>
<script type="text/javascript">
    // 返回登录提示---start
    let alertDanger = $("div.alert div.iq-alert-text");
    if (alertDanger != null && alertDanger !== "") {
        showCheckResult();
    }
    // 返回登录提示---end

    // 显示登录提示
    function showCheckResult() {
        alertDanger.parent().slideDown("slow");
        // 三秒后隐藏登录提示
        interval = setInterval(hideCheckResult, 3000);
    }

    // 隐藏登录提示
    function hideCheckResult() {
        $("div.alert").slideUp("slow");
        clearInterval(interval);
    }
</script>
</body>
</html>